<template>
  <div class="E-singer-card">
    <div
      @click="skipDetail(item.id)"
      class="box-content bg-image-cover"
      v-lazy:background-image="`${item.img1v1Url}?param=200y200`"
      v-maintain
    ></div>
    <div :style="item.accountId?'padding-right:20px;':''" class="box-title text-ellipsis">
      <el-popover
        trigger="hover"
        placement="top"
        :open-delay="1000"
        popper-class="el-popover-narrow"
        v-model="item.__show_popover"
      >
        <E-popover-singer v-if="item.__show_popover" :id="item.id" />
        <span class="user-name" @click="skipDetail(item.id)" slot="reference">{{item.name}}</span>
      </el-popover>
      <el-button
        v-if="item.accountId"
        @click="skipSinger(item.accountId)"
        icon="el-icon-user"
        size="mini"
        circle
      />
    </div>
  </div>
</template>

<script>
export default {
  props: ['item'],
  components: {
    'E-popover-singer': () => import('@/components/high-reuse/E-popover-singer')
  },
  methods: {
    skipSinger(id) {
      console.log('跳转个人主页', id);
      this.$message('该功能暂未完善，敬请期待 ~');
    },
    skipDetail(id) {
      console.log('跳转歌手页', id);
      this.$message('该功能暂未完善，敬请期待 ~');
    }
  },
  directives: {
    maintain: {
      inserted(el) {
        const { width } = getComputedStyle(el, null);
        // eslint-disable-next-line no-param-reassign
        el.style.height = width;
      }
    }
  },
  filters: {
    optimization(val) {
      if (window.parseInt(val / 100000)) {
        return `${Math.round(val / 10000)}万`;
      }
      return val;
    }
  }
};
</script>

<style lang="scss" scoped>
.E-singer-card {
  margin-bottom: 20px;
  line-height: 20px;
  & > .box-content {
    position: relative;
    cursor: pointer;
    margin-bottom: 5px;
    height: 126.5px;
  }
  & > .box-title {
    position: relative;
    height: 20px;
    & > .user-name {
      cursor: pointer;
      &:hover {
        color: #000;
      }
    }
    & > .el-button {
      position: absolute;
      top: 0;
      right: 0;
      &.el-button--mini.is-circle {
        padding: 3px;
        & > i {
          font-size: 8px;
        }
      }
    }
  }
}
</style>
